<template>
	<div class="container">
		<h1>todos</h1>
		<input
			type="text"
			placeholder="输入任务名称-回车确认"
			@keyup.enter="onAdd"
			v-model="inputValue"
		/>
	</div>
</template>

<script>
import ToDoList from "../ToDoList";
export default {
	data() {
		return {
			inputValue: "",
		};
	},
	methods: {
		onAdd() {
			ToDoList.$emit("onAdd", this.inputValue);
		},
	},
};
</script>
<style scoped>
.container {
	box-sizing: border-box;
	padding: 10px;
	width: 500px;
	background-color: rgb(235, 207, 207);
}
h1 {
	color: red;
	text-align: center;
}
input {
	width: 480px;
	height: 50px;
	outline: none;
	border: none;
}
</style>